<style lang="less" scoped>

</style>
<template>
  <a-modal
    :title="title"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel(false)"
  >
    <div class="flex pt-40 pb-40" style="align-items: center">
      <span style="color:red">*</span>
      <em style="flex: 0 0 100px;font-style: normal">门店下线原因 :</em>
      <a-input v-model="offlineStore" placeholder="请输入门店下线原因" style="flex: 0 0 300px"/>
    </div>
    <template #footer>
        <a-button type="primary" @click="handleOk">确认</a-button>
        <a-button @click="handleCancel(false)">取消</a-button>
    </template>
  </a-modal>
</template>
<script>
import {changeStatus} from '@/api/store/index'

export default {
  props: {
    title: {
      type: String,
      default: '门店下线'
    },
    placeholder: {
      type: String,
      default: '请输入门店下线原因'
    },
    items: {
      type: Object,
      default: () => ({})
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      offlineStore: '',
      confirmLoading: false

    }
  },
  methods: {
    handleOk() {
      if (this.offlineStore === '' || this.offlineStore.trim() === '') {
        this.$message.error('请输入门店下线原因')
        return
      }
      const sendData = {
        id: this.items.id,
        isClose: true,
        reason: this.offlineStore
      }
      changeStatus(sendData).then(res => {
        this.$message.success('操作成功')
        this.handleCancel(true)
      })
    },
    handleCancel(bool) {
      this.offlineStore = ''
      this.$emit('close', bool)
    }
  }
}
</script>
